<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <img id="light" src="img/off.gif" /> <br />
  <input type="button" value="点亮" onclick="on()" />
  <input type="button" value="熄灭" onclick="off()" />

  <br />
  <br />

  <input type="text" id="name" value="ITCAST" onblur="focus()" onfocus="lower()" />
  <br />
  <br />

  <input type="checkbox" name="hobby" /> 电影
  <input type="checkbox" name="hobby" /> 旅游
  <input type="checkbox" name="hobby" /> 游戏
  <br />

  <input type="button" value="全选" onclick="checkAll()" />
  <input type="button" value="反选" onclick="reverse()" />
</body>

<script>
  // 需求1 : 点击 “开灯”按钮 点亮灯泡，点击“熄灭”按钮 熄灭灯泡。
  function on() {
    // 获取img标签对象
    var imgObj = document.getElementById("light");
    imgObj.src = "./img/on.gif";
  }

  function off() {
    // 获取img标签对象
    var imgObj = document.getElementById("light");
    imgObj.src = "./img/off.gif";
  }

  // 需求2 : 输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
  function lower() {
    // 获得焦点内容变成小写
    var element = document.getElementById("name");
    element.value = element.value.toLowerCase();
  }

  function focus() {
    // 失去焦点内容变成大写
    var element = document.getElementById("name");
    element.value = element.value.toUpperCase();
  }

  // 需求3 : 点击 “全选”按钮使所有的复选框呈现被选中的状态，点击 “反选”按钮使所有的复选框呈现取消勾选的状态
  function checkAll() {
    var arr = document.getElementsByName("hobby");
    for (let i = 0; i < arr.length; i++) {
      const element = arr[i];
      element.checked = true;
    }
  }

  function reverse() {
    var arr = document.getElementsByName("hobby");
    for (let i = 0; i < arr.length; i++) {
      const element = arr[i];
      element.checked = element.checked;
    }
  }
</script>

</html>